<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="../lib/jquery-3.2.1.js"></script>
</head>
<body>
    <div class="box">
        <div class="header">
            <div class="header-content">
                <div class="header-left"></div>
                <div class="header-right">
                        <p class="p1">小米商城</p>
                        <p class="p2">让每个人都能享受科技的乐趣</p>
                </div>
            </div>
        </div>
    </div>
        <div class="content">
            <div class="banner_box">
                <a href="#" class="dl" id="byzhanghao" onclick="dl()">账号登录</a>
                <span style="color: #333">|</span>
                <a href="#" class="bysaoma" id="bysaoma" onclick="bysaoma()">扫码登录</a>
                <div class="zhdl" id="zhdl">
                    <form>
                        <input type="text" placeholder="邮箱/手机号/小米账号" />
                        <input type="password" placeholder="密码" />
                        <input style="background-color: orangered; border: none; color: white;" type="submit" value="立即登录">
                    </form>
                    <span class="zhanghao">
                        <a href="#" style="color: rgb(172, 167, 167)">
                            注册小米账号</a>
                        <span>|</span>
                        <a href="#" style="color: rgb(172, 167, 167)">
                            忘记密码?</a>
                    </span>
                    <p class="down">
                        <fieldset class="border">
                            <legend>其他登陆方式</legend>
                        </fieldset>
                    </p>
                    <div class="qita">
                        <div class="icons">
                            <a href="#" ><span class="one"></span></a>
                            <a href="#" ><span class="two"></span></a>
                            <a href="#" ><span class="three"></span></a>
                            <a href="#" ><span class="four"></span></a>
                        </div>
                    </div>
                </div>
            </div>
        <div class="smdl" id="smdl">
            <img class="sao" src="images/sao.png" />
            <div class="shezhi">
            <p class="p3">使用<span>小米商城APP</span>扫一扫</p>
            <p class="p4">小米手机可打开[设置]&gt;[小米账号]扫码登录</p>
            </div>
        </div>
    </div>        
    <div class="footer">
        <div class="footer-content">
            <p class="bottom1">简体 | 繁体 | English | 常见问题 </p>
            <p class="bottom2">小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</p>
        </div>
    </div>
<script type="text/javascript">
    var smc = document.getElementById("bysaoma");
    var dld = document.getElementById("byzhanghao");
    var dljm = document.getElementById("zhdl");
    var smdl = document.getElementById("smdl");
    function bysaoma() {
        smc.style.color = "orangered";
        dld.style.color = "black";
        dljm.style.visibility = "hidden";
        smdl.style.visibility = "visible";
    }
    function dl() {
        smc.style.color = "black";
        dld.style.color = "orangered";
        dljm.style.visibility = "visible";
        smdl.style.visibility = "hidden";
    }
</script>
</body>
</html>